import React, { Component } from 'react'
import {Input, Button, Table, Message, Select} from 'element-react'
import {withRouter} from 'react-router-dom'
import Breadcrumb from '../base/Breadcrumb'
import {InputGroup, InputLabel, InlineMarginR, QuillElem, SmallPicture} from '../base/BaseStatic'
import styled from 'styled-components'
import Quill from 'quill'
import 'quill/dist/quill.snow.css'

class goodsDetail extends Component {
  constructor (props) {
    super(props)
    this.state = {
      id: '',
      name: '',
      categroyIds: '',
      sellerName: '',
      repertory: '',
      startTime: '',
      endTime: '',
      status: '',
      oneType: [],
      imgs: [],
      goodsColumns: [
        {
          label: '参数名称',
          prop: 'paramName',
          align: 'center'
        },
        {
          label: '参数值',
          prop: 'paramNum',
          align: 'center'
        }
      ],
      goodsData: [],
      skuColumns: [
        {
          label: 'sku名称',
          prop: 'name',
          align: 'center'
        },
        {
          label: '时间',
          prop: 'time',
          align: 'center'
        },
        {
          label: '状态',
          prop: 'status',
          align: 'center'
        },
        {
          label: '操作',
          prop: 'operate',
          align: 'center',
          render: (item) => {
            return (
              <span>
                <Button type="info" size="small" onClick={this.goPriceDetail.bind(this, item)}>价格详情</Button>
              </span>
            )
          }
        }
      ],
      skuData: [],
      value: '<p>quill测试文本</p>',
      fileList: []
    }
    this.editor = null
  }
  componentDidMount () {
    this.selectOneTyprArr()
    this.selectModifProduct()
  }
  // 加入富文本框
  addQuill () {
    const textbox = this.refs.textarea
    const toolbarOptions = [
      ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
      ['blockquote', 'code-block'],
      [{ 'header': 1 }, { 'header': 2 }],               // custom button values
      [{ 'list': 'ordered'}, { 'list': 'bullet' }],
      [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
      [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
      [{ 'direction': 'rtl' }],
      [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
      [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
      [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
      [{ 'font': [] }],
      [{ 'align': [] }],
      ['image', 'video'],
      ['clean']                                         // remove formatting button
    ]
    const options = {
      debug: 'warn',
      modules: {
        toolbar: toolbarOptions
      },
      placeholder: '请输入文本...',
      readOnly: false,
      theme: 'snow'
    }
    let editor =this.editor= new Quill(textbox,options)
    let {value}=this.state
    if (value) editor.clipboard.dangerouslyPasteHTML(value)
    editor.on('text-change', this.handleChange.bind(this))
  }
  handleChange () {
    let {value}=this.state
    value = this.editor.root.innerHTML
    this.setState({value},()=> {console.log(this.state.value)})
  }
  // 查找一级分类数据
  selectOneTyprArr () {
    this.$ajax.selectOneType().then(res => {
      if (res.code === 200) {
        let oneTypeArr = res.data.map((a) => {
          a.label = a.name
          a.value = a.id
          return a
        })
        this.setState({oneType: oneTypeArr})
      } else {
        Message.error(res.msg)
      }
    }).catch(() => {
      Message.error('网络错误')
    })
  }
  // 根据id查询产品详情
  selectModifProduct () {
    this.$ajax.selectModifProduct(this.props.match.params.id).then(res => {
      if (res.code === 200) {
        // let t = [
        //   {name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg'}
        // ]
        this.setState({
          id: res.data.id,
          name: res.data.name,
          categroyIds: res.data.categroyIds,
          sellerName: res.data.sellerName,
          repertory: res.data.repertory,
          startTime: res.data.startTime,
          endTime: res.data.endTime,
          status: res.data.status,
          // imgs: t,
          imgs: res.data.imgVos,
          value: res.data.description
        }, () => {this.addQuill()})
      } else {
        Message.error(res.msg)
      }
    }).catch(() => {
      Message.error('网络错误')
    })
  }
  // 获取产品规格列表
  getProductSpecList () {
    this.$ajax.selectProductSpec(this.state.id).then(res => {
      if (res.code === 200) {
        res.data.map((a, index) => {
          a.paramName = a.value
          a.paramArr = []
          a.values.map((item, i) => {
            a.paramArr.push(item.value)
            return a
          })
          a.paramNum = a.paramArr.join('/')
          return a
        })
        this.setState({goodsData: res.data})
      } else {
        Message.error(res.msg)
      }
    }).catch(() => {
      Message.error('网络错误')
    })
  }
  // 获取sku规格列表
  selectProAllsku () {
    this.$ajax.selectProAllsku(this.state.id).then(res => {
      if (res.code === 200) {
        res.data.map((a, index) => {
          a.time = a.startTime + ' 至 ' + a.endTime
          return a
        })
        this.setState({skuData: res.data})
      } else {
        Message.error(res.msg)
      }
    }).catch(() => {
      Message.error('网络错误')
    })
  }
  // sku规格列表价格详情
  goPriceDetail (a) {
    sessionStorage.skuName = a.name
    this.props.history.push({
      pathname: `/skuPrice/${a.id}`,
      state: { fromDashboard: true }
    })
  }
  getImgItem () {
    console.log(this.state.imgs)
    if (this.state.imgs !== null) {
      if (this.state.imgs.length > 0) {
        let t = this.state.imgs.map((a, index) => {
          return (
            <SmallPicture key={index}><img src={a.url} alt=""></img></SmallPicture>
          )
        })
        return t
      } else {
        return <span>暂无图片</span>
      }
    }
    if (this.state.imgs === null) {
      return <span>暂无图片</span>
    }
  }
  render () {
    const TableItem = styled.div`
      width: 80%;
      display: inline-block;
    `
    return (
      <div className="goods-detail" >
        <Breadcrumb data={['商品管理', '商品列表', '查看']}/>
        <InputGroup>
          <InputLabel className="inputLabel">产品名称：</InputLabel>
          <Input placeholder="请输入产品名称" size="small" className="inputSmall" disabled value={this.state.name}/>
        </InputGroup>
        <InputGroup>
          <InputLabel className="inputLabel">产品分类：</InputLabel>
          <div className="inline-marginR-20">
            <Select options={this.state.oneType} value={this.state.categoryId}/>
          </div>
          {/*<Input size="small" className="inputSmall" disabled value={this.state.categroyIds}/>*/}
        </InputGroup>
        <InputGroup>
          <InputLabel className="inputLabel">卖家：</InputLabel>
          <Input size="small" className="inputSmall" disabled value={this.state.sellerName}/>
        </InputGroup>
        <InputGroup>
          <InputLabel className="inputLabel">产品缩略图：</InputLabel>
          {this.getImgItem.call(this)}
        </InputGroup>
        <InputGroup>
          <InputLabel className="inputLabel">产品描述：</InputLabel>
          <QuillElem>
            <div ref="textarea"></div>
          </QuillElem>
        </InputGroup>
        <InputGroup>
          <InputLabel className="inputLabel">产品有效期：</InputLabel>
          <InlineMarginR><Input size="small" className="inputSmall" disabled value={this.state.startTime}/></InlineMarginR>
          <Input size="small" className="inputSmall" disabled value={this.state.endTime}/>
        </InputGroup>
        <InputGroup>
          <InputLabel className="inputLabel">状态：</InputLabel>
          <Input placeholder="" size="small" className="inputSmall" disabled value={this.state.status > 0 ? '已上架' : '未上架'}/>
        </InputGroup>
        <InputGroup>
          <InputLabel className="inputLabel">产品的sku总数：</InputLabel>
          <Input placeholder="" size="small" className="inputSmall" disabled value={this.state.repertory}/>
        </InputGroup>
        <InputGroup>
          <InputLabel className="inputLabel">产品规格列表：</InputLabel>
          <TableItem>
            <Table
                style={{width: '100%'}}
                columns={this.state.goodsColumns}
                data={this.state.goodsData}
                border={true}
            />
          </TableItem>
        </InputGroup>
        <InputGroup>
          <InputLabel className="inputLabel">sku规格列表：</InputLabel>
          <TableItem>
            <Table
                style={{width: '100%'}}
                columns={this.state.skuColumns}
                data={this.state.skuData}
                border={true}
            />
          </TableItem>
        </InputGroup>
      </div>
    )
  }
}
export default withRouter(goodsDetail)